import { Component, OnInit } from '@angular/core';

@Component({
    selector: "inspection-index-cctv",
    styleUrls: ['./components.less'],
    template: `
       <div class="cctv">
            <nz-container *ngIf="!detailsMode">
                <span>线路：</span>
                <nz-select  nzPlaceHolder="请选择"  [ngModel]='cctv_select_val'>
                    <nz-option nzLabel="一号线" nzValue="1"></nz-option>
                    <nz-option nzLabel="二号线" nzValue="2"></nz-option>
                    <nz-option nzLabel="三号线" nzValue="3"></nz-option>
                </nz-select>
            </nz-container>
            <div *ngIf="detailsMode" (click)="detailsMode = false"><<<{{detailsItem.siteName}}</div>
            <div class="cctv-content" >
               
                <nz-container *ngIf="!detailsMode">
                    <div class="cctv-item" *ngFor="let item of mock_data">
                        <div class="cctv-video">
                        </div>
                        <div>
                            <span>{{item.siteName}}</span>：{{item.children[0].subSite}}<span><button nz-button nzType="primary" (click)="onItemClick(item)">更多</button></span>
                        </div>
                    </div>
                </nz-container>
                <nz-container *ngIf="detailsMode">
                    <div class="cctv-item"  *ngFor="let item of detailsItem.children">
                        <div class="cctv-video">
                        </div>
                        <div>
                            <span>{{item.subSite}}</span>
                        </div>
                    </div>
                </nz-container>
                
            </div>
        </div>
    `
})

export class InspectionIndexCCTVComponent implements OnInit {
    cctv_select_val: string = "1"
    detailsMode: boolean = false
    detailsItem: any
    onItemClick(data) {
        this.detailsMode = true
        this.detailsItem = data
    }

    mock_data = [
        {
            siteName: '火车南站',
            children: [
                {
                    subSite: '配电室'
                },
                {
                    subSite: '高压室'
                },
                {
                    subSite: '低压室'
                },
                {
                    subSite: '配电室2'
                },
                {
                    subSite: '高压室2'
                },
                {
                    subSite: '低压室2'
                }
            ]
        },
        {
            siteName: '沙湾公园',
            children: [
                {
                    subSite: '配电室'
                },
                {
                    subSite: '高压室'
                },
                {
                    subSite: '低压室'
                },
                {
                    subSite: '配电室2'
                },
                {
                    subSite: '高压室2'
                },
                {
                    subSite: '低压室2'
                }
            ]
        },
        {
            siteName: '长沙大道',
            children: [
                {
                    subSite: '配电室'
                },
                {
                    subSite: '高压室'
                },
                {
                    subSite: '低压室'
                },
                {
                    subSite: '配电室2'
                },
                {
                    subSite: '高压室2'
                },
                {
                    subSite: '低压室2'
                }
            ]
        },
        {
            siteName: '人民东路',
            children: [
                {
                    subSite: '配电室'
                },
                {
                    subSite: '高压室'
                },
                {
                    subSite: '低压室'
                },
                {
                    subSite: '配电室2'
                },
                {
                    subSite: '高压室2'
                },
                {
                    subSite: '低压室2'
                }
            ]
        },
        {
            siteName: '锦泰广场',
            children: [
                {
                    subSite: '配电室'
                },
                {
                    subSite: '高压室'
                },
                {
                    subSite: '低压室'
                },
                {
                    subSite: '配电室2'
                },
                {
                    subSite: '高压室2'
                },
                {
                    subSite: '低压室2'
                }
            ]
        },
        {
            siteName: '火车站',
            children: [
                {
                    subSite: '配电室'
                },
                {
                    subSite: '高压室'
                },
                {
                    subSite: '低压室'
                },
                {
                    subSite: '配电室2'
                },
                {
                    subSite: '高压室2'
                },
                {
                    subSite: '低压室2'
                }
            ]
        },
    ]
    ngOnInit(): void {

    }
}